<template >

  <router-link to="/user" >
    <van-cell center title="< 会员信息" icon="icon-fanhui" style="font-size: 16px; font-family:'小黑';" class="vip"/>
    </router-link> 

    <div class="bir">
      
 <van-cell center title="头像" >
   <!-- 使用 right-icon 插槽来自定义右侧图标 -->
   <template #right-icon>
    <img src="../assets/image/my-avatar.jpg" style="width: 50px;height: 50px;" decoding="async" id="myImg" alt="文本描述信息"/> 
    <!-- <div>
    <van-image :src="imgSrc" fit="contain" @click.native="showImagePreview"></van-image>
    <van-image-preview v-model="showPreview" :iages="previewImages" />
  </div> -->
   
   </template>
 </van-cell>

  <router-link to="/rename" style="color:#96999C;"> <van-cell center title="昵称" is-link to="index" size="large">{{product[0].name}}</van-cell> </router-link>

 <van-cell center title="性别" is-link @click="showTop" size="large" >{{product[0].sex}}</van-cell>

<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }"></van-popup>
 <router-link to="/phone" > <van-cell center title="电话号码" is-link to="index" size="large">{{product[0].phone}}</van-cell></router-link>
 

      <van-field
       style="color:#96999C"
       v-model="brithday"
       is-link
        readonly
        label="生日"
        placeholder="选择生日"
        @click="showPicker = true"
        />
          <van-popup v-model:show="showPicker" round position="bottom">
              <van-picker-group
           title="选择生日"
          :tabs="['选择日期', ]"
          @confirm="onConfirm"
          @cancel="onCancel"
        >
          <van-date-picker
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
          />
            <van-time-picker v-model="currentTime" />
              </van-picker-group>
                </van-popup>


   </div>
  
 

  
</template>



    
 <script setup>
  import {ref ,onMounted} from 'vue'
  import axios from '../utils/axios.js'
  import { showToast } from 'vant';



  //时间
  const show = ref(false);


    const fieldValue = ref('');
    const showPicker = ref(false);

    const brithday = ref()
    const currentDate = ref(['2022', '06', '01']);
    const currentTime = ref(['12', '00']);

    const onConfirm = ( ) => {

      brithday.value =currentDate.value.toString()
      showPicker.value =false;
    
    };

    const onCancel = () => {
        console.log('保存失败');
    };
    

  
  

  const product = ref([
    {id:1,phone:'123456',sex:'男',name:'wz'}
  ])

onMounted(() => {
  // 用户数据
axios.get('/usercase?id=2',{}).then((res) => {
    console.log(res)
    product.value = res.data
  })

})


    // const imgSrc = ref('https://ts3.cn.mm.bing.net/th?id=OIP-C.ZkoPhpKfJwsvGmpm8RsragHaFp&w=286&h=218&c=8&rs=1&qlt=90&o=6&dpr=1.9&pid=3.1&rm=2');
    // const showPreview = ref(false);
    // console.log(imgSrc.value);
    // const previewImages = ref([{ url: imgSrc.value }]);
    
    // function showImagePreview() {
    //   ImagePreview({
    //     images: previewImages.value,
    //     startPosition: 0,
    //     closeable: true,
    //     onClose: () => {
    //       showPreview.value = false;
    //     },
    //   });
    //   showPreview.value = true;
    // }



 
 </script>

 <style >

input.van-field__control::-webkit-input-placeholder {
        
      text-align: right;
   }
   .van-field__control{
    text-align: right ;
    color:#96999C ;
   }
   .van-cell__value {
    min-width: 40px;
    
   }
  .van-cell{
    height: 50px;

  }
  

   
 </style>